<template>
  <div class="user-shop-cart-outer">
    <div class="user-shop-cart-title-font">
      My Cart
    </div>
    <a-spin :spinning="state.isRefreshing&&state.refreshingId==null" style="width: 100%">
      <div style="display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;"
           ref="containerRef" v-if="cartInfo!=null">
        <div class="user-shop-cart-good-list">
          <basic-button :inverse-color="true" @click="toChangeSelectedAll(true)">Select All</basic-button>
          <basic-button @click="toChangeSelectedAll(false)">Select None</basic-button>
          <a-spin v-for="cart in cartInfo.cartList" :spinning="state.isRefreshing&&state.refreshingId==cart.id"
                  style="width: 100%">
            <div v-if="cart.laterBuy==1">
              <div class="cart-card-outer" style="align-items: stretch">
                <div style="display:flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;margin-right: 10px;">
                  <a-spin :spinning="state.isRefreshOrderInfo">
                    <a-checkbox v-model:checked="selectedItem[cart.id]"></a-checkbox>
                  </a-spin>
                </div>
                <div class="cart-card-image-outer">
                  <img @click="toRoute(cart.goodId)"
                       :src="cart.good.mainImage">
                  <div class="cart-card-font-content cart-line show-max-768px">
                    <basic-number-input :disabled="state.isRefreshing" @toChange="toUpdateCart" :disable="false"
                                        :otherValues="{id:cart.id,laterBuy:null}" v-model="cart.number"/>
                  </div>
                </div>
                <div class="cart-card-info-outer"
                     style="flex: 1 1 auto;max-width: unset;justify-content: space-between;display: flex;flex-direction: column;">
                  <div>
                    <div class="cart-card-font-title cart-line" style="font-weight: bold;padding-top: 0">
                      {{ cart.good.name }}
                    </div>
                    <div class="cart-card-font-content cart-line" v-if="cart.good.producer!=null">
                      by {{ cart.good.producer }}
                    </div>
                    <div class="cart-card-font-content" >
                      <div style="color: #646266;font-size: 12px;" v-if="cart.good.specification.specification!=null">
                        <div v-for="specification in cart.good.specification.specification" style="line-height: 1.1;padding:4px 0;box-sizing: border-box">
                          <span style="background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box">
                            {{specification.key}} :  {{specification.value}}
                          </span>
                        </div>
                      </div>
                    </div>
                    <!--                    <div class="show-max-768px">-->
                    <!--                      <div class="cart-line" style="font-size: 24px;text-align: left;display: inline-block">-->
                    <!--                        {{ cart.price == 0 ? 'FREE' : ('$' + cart.price) }}-->
                    <!--                        &lt;!&ndash;                <div style="font-size: 16px;text-decoration-line: line-through;text-align: left;display: inline-block">&ndash;&gt;-->
                    <!--                        &lt;!&ndash;                  &nbsp;$45.30&nbsp;&ndash;&gt;-->
                    <!--                        &lt;!&ndash;                </div>&ndash;&gt;-->
                    <!--                      </div>-->
                    <!--                    </div>-->
                  </div>
                  <div class="cart-card-price-outer"
                       style="flex-direction: row;display: flex;justify-content: space-between;align-items: stretch">
                    <div style="flex-direction: column;display: flex;justify-content: flex-end;align-items: stretch">

                      <div class="cart-line" style="font-size: 24px;text-align: left;display: block">
                        {{ cart.price == 0 ? 'FREE' : ('$' + cart.price) }}
                        <!--              <div style="font-size: 16px;text-decoration-line: line-through;text-align: right;">-->
                        <!--                &nbsp;$45.30&nbsp;-->
                        <!--              </div>-->
                      </div>
                      <div class="cart-card-font-content cart-line show-min-768px" style="padding: 0">
                        <basic-number-input :disabled="state.isRefreshing" @toChange="toUpdateCart" :disable="false"
                                            :otherValues="{id:cart.id,laterBuy:null}" v-model="cart.number"/>
                      </div>
                    </div>
                    <div style="display: flex;flex-direction: column;justify-content: flex-end">
                      <div style="font-size: 16px;text-align: right;padding: 5px 0">
                        <a-button type="link" size="small" @click="toDeleteCart(cart.id)">Remove</a-button>
                      </div>
                      <div style="font-size: 16px;text-align: right;padding: 5px 0">
                        <a-button type="link" size="small" @click="toUpdateCart({id:cart.id,number:null,laterBuy:2})">
                          Buy It
                          Later
                        </a-button>
                      </div>
                    </div>

                  </div>
                </div>

              </div>
            </div>
          </a-spin>

          <div style="display: flex;flex-direction: column;align-items: center;margin-top: 50px;justify-content: center" v-if="toBuyCartList==null||toBuyCartList.length==0">
            <a-empty :image="Empty.PRESENTED_IMAGE_DEFAULT">
              <template #description>
                <div class="good-list-font" imageStyle="">
                  No Goods
                </div>
              </template>
            </a-empty>
          </div>

        </div>
        <div class="user-shop-cart-buying-list-right-side">
          <a-affix style="width: 100%;box-sizing: border-box;">
            <div class="user-shop-cart-buying-list-right-side-inside-outer" v-if="showAffix">
              <div ref="affix">
                <a-spin :spinning="state.isRefreshOrderInfo||(state.isRefreshing)"
                        style="width: 100%">
                  <basic-card style="box-sizing: border-box;width: 100%;" :hovered="true">
                    <div style="padding: 20px">
                      <div class="cart-card-font-content cart-line">
                        <span>Subtotal({{orderInfo.number}} items):</span>
                        <span
                            class="cart-card-font-price">{{
                            orderInfo.goodsPrice == 0 ? 'FREE' : ('$' + orderInfo.goodsPrice)
                          }}</span>
                      </div>

                      <div class="cart-card-font-content cart-line">
                        <span>Total  Shipping Cost:</span>
                        <span
                            class="cart-card-font-price">{{
                            orderInfo.freightPrice == 0 ? 'FREE' : ('$' + orderInfo.freightPrice)
                          }}</span>
                      </div>
                      <!--                  <div class="cart-card-font-content cart-line"-->
                      <!--                       style="border-bottom: 1px solid rgb(223, 223, 225)">-->
                      <!--                    <span>Estimated Tax:</span>-->
                      <!--                    <span class="cart-card-font-price">$23.25</span>-->
                      <!--                  </div>-->

                      <div class="cart-card-font-title cart-line">
                        <span>Total:</span>
                        <span
                            class="cart-card-font-price">{{
                            orderInfo.totalPrice == 0 ? 'FREE' : ('$' + orderInfo.totalPrice)
                          }}</span>
                      </div>

                      <basic-button style="box-sizing: border-box;width: 100%" :inverse-color="true"
                                    @click="toCreateOrder">
                        <div style="text-align: center">
                          Buy !
                        </div>
                      </basic-button>
                    </div>
                  </basic-card>
                </a-spin>
              </div>
            </div>
          </a-affix>
        </div>
        <div class="user-shop-cart-good-list-bottom-side">
          <a-spin :spinning="state.isRefreshing||state.isRefreshOrderInfo"
                  style="width: 100%;">
            <basic-card style="box-sizing: border-box;width: 100%;" :hovered="true">
              <div style="padding: 20px">
                <div class="cart-card-font-content cart-line">
                  <span>Subtotal({{orderInfo.number}} items):</span>
                  <span
                      class="cart-card-font-price">{{
                      orderInfo.goodsPrice == 0 ? 'FREE' : ('$' + orderInfo.goodsPrice)
                    }}</span>
                </div>
                <div class="cart-card-font-content cart-line">
                  <span>Total  Shipping Cost:</span>
                  <span
                      class="cart-card-font-price">{{
                      orderInfo.freightPrice == 0 ? 'FREE' : ('$' + orderInfo.freightPrice)
                    }}</span>
                </div>
                <!--            <div class="cart-card-font-content cart-line"-->
                <!--                 style="border-bottom: 1px solid rgb(223, 223, 225)">-->
                <!--              <span>Estimated Tax:</span>-->
                <!--              <span class="cart-card-font-price">$23.25</span>-->
                <!--            </div>-->

                <div class="cart-card-font-title cart-line">
                  <span>Total:</span>
                  <span
                      class="cart-card-font-price">{{
                      orderInfo.totalPrice == 0 ? 'FREE' : ('$' + orderInfo.totalPrice)
                    }}</span>
                </div>

                <basic-button style="box-sizing: border-box;width: 100%;margin-top: 10px" :inverse-color="true"
                              @click="toCreateOrder">
                  <div style="text-align: center">
                    Buy !
                  </div>
                </basic-button>
              </div>
            </basic-card>
          </a-spin>
        </div>
      </div>
    </a-spin>
  </div>
  <div style="border-top: 1px solid black;z-index: 999;" class="user-shop-cart-outer" v-if="cartInfo!=null">
    <div class="user-shop-cart-title-font">
      Buy It Later
    </div>
    <div style="display: flex;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;"
         v-if="cartInfo!=null">
      <div class="user-shop-cart-good-not-now-list">
        <div class="cart-card-spin-outer" v-for="cart in laterBuyCartList">
          <a-spin :spinning="state.isRefreshing&&state.refreshingId==cart.id"
                  style="width: 100%">
            <div>
              <div class="cart-card-outer" style="align-items: stretch;">
                <div class="cart-card-image-outer">
                  <img @click="toRoute(cart.goodId)"
                       :src="cart.good.mainImage">
                </div>
                <div class="cart-card-info-outer"
                     style="flex: 1 1 auto;max-width: unset;display: flex;flex-direction: column;height: 100%">
                  <div>
                    <div class="cart-card-font-title cart-line" style="font-weight: bold;padding-top: 0">
                      {{ cart.good.name }}
                    </div>
                    <div class="cart-card-font-content cart-line" v-if="cart.good.producer!=null">
                      by {{ cart.good.producer }}
                    </div>
                    <div class="cart-card-font-content">
                      <div style="color: #646266;font-size: 12px;margin: 10px 0" v-if="cart.good.specification.specification!=null">
                        <div v-for="specification in cart.good.specification.specification" style="line-height: 1.1;padding:4px 0;box-sizing: border-box">
                          <span style="background-color: #eeeeee;padding: 3px;border-radius: 5px;font-size: 12px;box-sizing: border-box">
                            {{specification.key}} :  {{specification.value}}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <div style="display: flex;flex-direction: column;justify-content: flex-end">
                      <div class="cart-line" style="font-size: 24px;text-align: left;display: inline-block">
                        {{ cart.price == 0 ? 'FREE' : ('$' + cart.price) }}
                        <!--                <div style="font-size: 16px;text-decoration-line: line-through;text-align: left;display: inline-block">-->
                        <!--                  &nbsp;$45.30&nbsp;-->
                        <!--                </div>-->
                      </div>
                    </div>

                    <div>
                      <div style="font-size: 16px;text-align: right;padding: 5px 0">
                        <a-button type="link" size="small" style="z-index: 999;" @click="toDeleteCart(cart.id)">Remove</a-button>
                      </div>
                      <div style="font-size: 16px;text-align: right;padding: 5px 0">
                        <a-button type="link" size="small"  style="z-index: 999;" @click="toUpdateCart({id:cart.id,number:null,laterBuy:1})">
                          Buy It
                          Now!
                        </a-button>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </a-spin>


        </div>

      </div>
    </div>

    <div style="display: flex;flex-direction: column;align-items: center;margin-top: 50px;" v-if="laterBuyCartList==null||laterBuyCartList.length==0">
      <a-empty :image="Empty.PRESENTED_IMAGE_DEFAULT">
        <template #description>
          <div class="good-list-font" imageStyle="">
            No Goods
          </div>
        </template>
      </a-empty>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted, onUnmounted, VNode} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {deleteCartById, GetCartRequestType, searchCart, updateCartById} from '../../../api/CartRequest';
import {Modal, Empty, notification} from "ant-design-vue";
import {createOrder} from "../../../api/OrderActionRequest";
import BasicButton from "../../../components/button/basicButton.vue";
export default defineComponent({
  components: {BasicButton},
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const containerRef = ref();
    const affix = ref();
    const showAffix = ref(true)
    const affixHeight = ref(0)

    const selectedItem=ref({});
    const toChangeSelectedAll=(state:boolean)=>{
      for (let i = 0; i < toBuyCartList.value.length; i++) {
        //@ts-ignored
        selectedItem.value[toBuyCartList.value[i].id]=state;
      }
      toGetOrderInfo();
    }
    const watchAffix = () => {
      let num;
      if (affix != null && affix.value != null && affix.value.offsetHeight != null) {
        num = affix.value.offsetHeight;
        affixHeight.value = num;
      } else {
        num = affixHeight.value
      }
      showAffix.value = containerRef.value.getBoundingClientRect().bottom - 40 - num >= 0
    }

    onMounted(() => {
      cartInfo.value = store.state.globalInfo.cartInfo

      watch(() => store.state.globalInfo.cartInfo, (value) => {
        cartInfo.value = value;
      })

      toSearchCart();

      window.addEventListener('scroll', watchAffix);
    })
    onUnmounted(() => {
      window.removeEventListener('scroll', watchAffix);
      window.removeEventListener('scroll', watchAffix);
    })
    const cartInfo = ref<any>(null)


    const toSearchCart = () => {
      if (state.isRefreshing) return;
      state.isRefreshing = true
      searchCart().then((res) => {
        if(res.data.result!=undefined&&res.data.result.cartList!=null){
          for (let i = 0; i < res.data.result.cartList.length; i++) {
            //@ts-ignored
            res.data.result.cartList[i].good.specification.specification=JSON.parse(res.data.result.cartList[i].good.specification.specification)
          }
        }
        store.commit('SET_GLOBAL_INFO', {cartInfo: res.data.result})
      }).finally(() => {
        state.isRefreshing = false
        state.refreshingId = null;
      })
    }

    const toRoute = (goodId: string) => {
      if (goodId == null) return;
      router.push({
        name: '商品页面',
        params: {
          id: goodId
        }
      })
    }

    const toDeleteCart = (id: string) => {
      if (state.isRefreshing) return;
      state.isRefreshing = true
      //@ts-ignored
      state.refreshingId = id;
      deleteCartById(id).then((res) => {
        if(res.data.result!=undefined&&res.data.result.cartList!=null){
          for (let i = 0; i < res.data.result.cartList.length; i++) {
            //@ts-ignored
            res.data.result.cartList[i].good.specification.specification=JSON.parse(res.data.result.cartList[i].good.specification.specification)
          }
        }
        store.commit('SET_GLOBAL_INFO', {cartInfo: res.data.result})
        notification.success({
          message: 'Delete succeeded'
        })
        delete selectedItem[id];
      }).catch((res) => {
        notification.warning({
          message: res.data.message
        })
      }).finally(() => {
        state.isRefreshing = false;
        state.refreshingId = null;
      })
    }

    const toUpdateCart = (data: { id: string, number: number | null, laterBuy: number | null }) => {

      if (state.isRefreshing) return;
      state.isRefreshing = true;

      //@ts-ignored
      state.refreshingId = data.id;
      updateCartById(data).then((res) => {
        if(data.laterBuy==2){
          delete selectedItem.value[data.id];
        }else{
          toGetOrderInfo();
        }
        if(res.data.result!=undefined&&res.data.result.cartList!=null){
          for (let i = 0; i < res.data.result.cartList.length; i++) {
            //@ts-ignored
            res.data.result.cartList[i].good.specification.specification=JSON.parse(res.data.result.cartList[i].good.specification.specification)
          }
        }
        store.commit('SET_GLOBAL_INFO', {cartInfo: res.data.result})
        notification.success({
          message: 'Success'
        })

      }).catch((res) => {
        notification.warning({
          message: res.data.message
        })
      }).finally(() => {
        state.isRefreshing = false;
        state.refreshingId = null;
      })
    }

    const log = (val: any) => {
      console.log(val)
    }

    const state = reactive({
      isRefreshing: false,
      refreshingId: null,
      isRefreshOrderInfo:false
    })

    const laterBuyCartList = computed(() => {
      if (cartInfo.value == null || cartInfo.value.cartList == null) return null;
      else return cartInfo.value.cartList.filter((value: any) => {
        return value.laterBuy == 2
      })
    })
    const toBuyCartList = computed(() => {
      if (cartInfo.value == null || cartInfo.value.cartList == null) return null;
      else return cartInfo.value.cartList.filter((value: any) => {
        return value.laterBuy == 1
      })
    })

    const toCreateOrder = () => {
      let ids: string[]=[];
      for (let valueKey in selectedItem.value) {
        if(selectedItem.value[valueKey]!=null&&selectedItem.value[valueKey]){
          ids.push(valueKey)
        }
      }

      if(ids.length==0){

        notification.info({
          message:'Please select at least one item'
        })

        return;
      }
      if (state.isRefreshing) return;

      state.refreshingId = null;
      state.isRefreshing = true;

      Modal.confirm({
        title: 'Confirm to generate order？',
        cancelText: 'Cancel',
        okText: 'Confirm',
        onCancel() {
          state.isRefreshing = false;
        },
        onOk() {
            router.push({
              path:'/user/toSubmitOrder',
              query:{
                cartIds:ids,
                type:2
              }
            })
          state.isRefreshing = false;
        },
      })

    }

    const orderInfo=ref({
      freightPrice:0,
      goodsPrice:0,
      totalPrice:0,
      number:0
    })

    watch(selectedItem.value,()=>{
      toGetOrderInfo();
    })

    const toGetOrderInfo=async ()=>{
      if(state.isRefreshOrderInfo)return
      state.isRefreshOrderInfo=true;
      let ids=[];

      for (let valueKey in selectedItem.value) {
        if(selectedItem.value[valueKey]!=null&&selectedItem.value[valueKey]){
          ids.push(valueKey)
        }
      }
      console.log(ids)
      if(ids.length==0){
        orderInfo.value.freightPrice=0;
        orderInfo.value.goodsPrice=0;
        orderInfo.value.totalPrice=0;
        orderInfo.value.number=0;
        state.isRefreshOrderInfo=false;
        return
      }
      await createOrder({
        cartIds:ids,
        type:2
      }).then((res)=>{
        console.log(JSON.parse(res.data.result.goods))
        let number=0;
        let goods=JSON.parse(res.data.result.goods);
        for (let i = 0; i < goods.length; i++) {
          number += goods[i].number
        }

        orderInfo.value=res.data.result
        orderInfo.value.number=number

        state.isRefreshOrderInfo=false;
      })
    }


    const cartNum=computed(()=>{
      if(toBuyCartList==null||toBuyCartList.value.length==0)return 0;
      let sum=0;
      for (let i = 0; i < toBuyCartList.value.length; i++) {
        sum+=toBuyCartList.value[i].number;
      }

      return sum;
    });
    return {
      selectedItem,
      toChangeSelectedAll,
      cartNum,
      laterBuyCartList,
      toCreateOrder,
      log,
      state,
      orderInfo,
      toUpdateCart,
      toDeleteCart,
      showAffix,
      affix,
      toSearchCart,
      cartInfo,
      containerRef,
      toRoute,Empty,toBuyCartList
    }
  }
})
</script>

<style scoped lang="less">
.user-shop-cart-outer {
  padding: 20px 20px;
  @media screen and ( max-width: 576px) {
    padding: 10px 10px;
  }

  &, *, * > * {
    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;
  }
}

.user-shop-cart-title-font {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 10px 0;
}

.user-shop-cart-good-not-now-list {
  box-sizing: border-box;
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;


  @media screen and ( max-width: 992px ) {
    padding: 0 15px;

  }

  .cart-card-spin-outer {

    flex: 0 0 50%;

    .cart-card-image-outer > img {
      width: 150px;
      height: 150px;
    }

    @media screen and ( max-width: 992px ) {

      .cart-card-image-outer > img {
        width: 120px;
        height: 120px;
      }


    }

    @media screen and (max-width: 768px) {
      .cart-card-image-outer > img {
        width: 100px;
        height: 100px;
      }
    }
    @media screen and (max-width: 700px) {
      flex: 0 0 100%;
      .cart-card-image-outer > img {
        width: 100px;
        height: 100px;
      }
    }
  }

  .cart-card-outer {
    border-bottom: 1px solid rgb(223, 223, 225);
  }

  .cart-card-outer:last-child {
    border-bottom: 0;
  }
}


.user-shop-cart-good-list {
  box-sizing: border-box;
  flex: 0 0 70%;
  max-width: calc(100% - 320px);
  padding: 0 20px 0 0 ;


  @media screen and ( max-width: 992px ) {
    max-width: calc(100% - 270px);
    padding: 0 15px;

  }

  @media screen and (max-width: 768px) {
    max-width: calc(100% - 250px);
    padding: 0 10px;

  }
  @media screen and (max-width: 650px) {
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0 0;
  }

  .cart-card-outer {
    border-bottom: 1px solid rgb(223, 223, 225);
  }

  .cart-card-outer:last-child {
    border-bottom: 0;
  }


  //height: 10000px;
  //background-color: #1677ff;
}

.user-shop-cart-buying-list-right-side {
  flex: 0 0 30%;
  box-sizing: border-box;
  //height: 100vh;

  min-width: 300px;
  @media screen and ( max-width: 992px ) {
    min-width: 260px;
  }

  @media screen and (max-width: 768px) {
    min-width: 240px;
  }
  @media screen and (max-width: 650px) {
    //flex: 0 0 100%;
    flex: 0 0 0;
    &, *, * > * {
      display: none !important;
    }
  }

  .user-shop-cart-buying-list-right-side-inside-outer > div {
    width: 100%;
  }

  .user-shop-cart-buying-list-right-side-inside-outer {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    //background-color: red;

    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: space-between;
    align-items: center;

  }

  .ant-affix {
    .user-shop-cart-buying-list-right-side-inside-outer {
      overflow: auto;
      overflow-x: hidden;
      height: 100vw;
      @media screen and (min-width: 992px) {
        padding-top: 68px;
      }
      @media screen and (max-width: 992px) {
        padding-top: 46px;
      }
    }
  }
}

.cart-card-font-title {
  font-size: 18px;
  font-weight: bold;
  @media screen and ( max-width: 992px ) {
    font-size: 15px;
  }
  @media screen and ( max-width: 768px ) {
    font-size: 14px;
  }
  @media screen and ( max-width: 576px ) {
    font-size: 14px;
  }

}

.cart-card-font-content {
  font-size: 15px;
  color: #646266;
  @media screen and ( max-width: 992px ) {
    font-size: 14px;
  }
  @media screen and ( max-width: 768px ) {
    font-size: 13px;
  }
  @media screen and ( max-width: 576px ) {
    font-size: 12px;
  }

}

.cart-card-font-price {
  word-break: keep-all;
  padding-left: 10px;
}

.cart-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  padding: 8px 0;

  @media screen and ( max-width: 992px ) {
    padding: 6px 0;
  }
  @media screen and ( max-width: 768px ) {
    padding: 6px 0;
  }
  @media screen and ( max-width: 576px ) {
    padding: 6px 0;
  }

}


.user-shop-cart-good-list-bottom-side {
  display: none;

  @media screen and (min-width: 651px) {
    *{
      display: none!important;
    }
    & *{
      display: none!important;
    }
  }
  @media screen and (max-width: 650px) {
    flex: 0 0 100%;
    display: block;
  }
}

.cart-card-outer {

  padding: 16px 16px 16px 0px;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  @media screen and ( max-width: 992px ) {
    padding: 13px 0;

  }
  @media screen and ( max-width: 768px ) {
    padding: 10px 0;
  }
  @media screen and ( max-width: 576px ) {
    padding: 6px 0;
  }

  .cart-card-image-outer {
    display: inline-flex;
    cursor: pointer;
    border-radius: 1.8em;

    flex-direction: column;
    align-items: center;


    img {

      @media screen and ( min-width: 1200px ) {
        height: 180px;
        width: 180px;
        border-radius: 1.4em;
      }
      @media screen and ( max-width: 1200px ) {
        height: 180px;
        width: 180px;
        border-radius: 1.4em;
      }

      @media screen and ( max-width: 992px ) {
        height: 150px;
        width: 150px;
        border-radius: 1.2em;
      }
      @media screen and ( max-width: 768px ) {
        height: 120px;
        width: 120px;
        border-radius: 1em;
      }
      @media screen and ( max-width: 650px ) {
        height: 110px;
        width: 110px;
        border-radius: 0.8em;
      }

      height: 200px;
      width: 200px;
      border-radius: 1.8em;
      object-fit: contain;
    }
  }

  .cart-card-info-outer {
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden;

    flex: 0 0 calc(100% - 200px - 124px);
    width: calc(100% - 200px - 124px);
    max-width: calc(100% - 200px - 124px);
    flex-basis: calc(100% - 200px - 124px);


    @media screen and ( max-width: 1200px ) {
      flex: 0 0 calc(100% - 180px - 124px);
      width: calc(100% - 180px - 124px);
      max-width: calc(100% - 180px - 124px) ;
      flex-basis: calc(100% - 180px - 124px);
    }

    @media screen and ( max-width: 992px ) {
      flex: 0 0 calc(100% - 150px - 124px);
      width: calc(100% - 150px - 124px);
      max-width: calc(100% - 150px - 124px) ;
      flex-basis: calc(100% - 150px - 124px);
      padding: 0 14px;
    }
    @media screen and ( max-width: 768px ) {
      flex: 1 1 auto;
      width: unset;
      max-width: unset;
      flex-basis: unset;
      padding: 0 8px;
    }
    @media screen and ( max-width: 650px ) {
      padding: 0 5px;
    }
  }

  .cart-card-price-outer {
    box-sizing: border-box;
    justify-self: flex-end;
    @media screen and ( max-width: 768px ) {
      display: none;
    }
  }
}

.show-max-768px {
  @media screen and (min-width: 769px) {
    display: none !important;
  }
}

.show-min-768px {
  @media screen and (max-width: 768px) {
    display: none !important;
  }
}
</style>
